<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div_0{
            width: 500px;
            height: 30px;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -250px;
        }
        #div_1{
            position: relative;
            top: 15px;
            font-weight: bold;
        }
        #div_2{
            position: relative;
            font-size: 12px;
            top: 2px;
            left: 405px;
            cursor: pointer;
        }
        img{
            margin-right: 10px;
            margin-top: 10px;
            height: 100px;
            width: 100px;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div id="div_0">
        <div id="div_1">相关书籍</div>
        <div id="div_2">换一换</div>
        <img src="img/1.png" alt="" id="img_1">
        <img src="img/2.png" alt="" id="img_2">
        <img src="img/3.png" alt="" id="img_3">
        <img src="img/4.png" alt="" id="img_4">
    </div>
    <script>
        document.getElementById('div_2').onclick=function(){
            var num_1=Math.floor(Math.random()*10+1)
            var num_2=Math.floor(Math.random()*10+1)
            var num_3=Math.floor(Math.random()*10+1)
            var num_4=Math.floor(Math.random()*10+1)
            while (num_1==num_2) {
                var num_2=Math.floor(Math.random()*10+1)
            }
            while (num_1==num_3|num_2==num_3) {
                var num_3=Math.floor(Math.random()*10+1)
            }
            while (num_1==num_4|num_2==num_4|num_3==num_4) {
                var num_4=Math.floor(Math.random()*10+1)
            }
            for(var i=0;i<11;i++){
                while (num_1==i&&i<11) {
                    var url='img/'+i+'.png'
                    document.getElementById('img_1').src=url
                    i++
                }
            }
            for(var i=0;i<11;i++){
                while (num_2==i&&i<11) {
                    var url='img/'+i+'.png'
                    document.getElementById('img_2').src=url
                    i++
                }
            }
            for(var i=0;i<11;i++){
                while (num_3==i&&i<11) {
                    var url='img/'+i+'.png'
                    document.getElementById('img_3').src=url
                    i++
                }
            }
            for(var i=0;i<11;i++){
                while (num_4==i&&i<11) {
                    var url='img/'+i+'.png'
                    document.getElementById('img_4').src=url
                    i++
                }
            }
        }
    </script>
</body>
</html>